<style>
    .plot-{{ context.rnd }} {
        font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
        -webkit-font-smoothing: antialiased;
        display: flex;
        flex-wrap: wrap;
        max-width: {{ context.container_width }}px;
    }

    .fig-{{ context.rnd }} {
        flex: 1 1 30%;
        margin-top: 10px;
        background: white;
    }

    .menu-{{ context.rnd }} {
        width: 293px;
        height: 20px;
        position: relative;
        left: 27px;
    }

    .insight-pre-{{ context.rnd }} {
        max-width: 200px;
        font-size: 10px;
        display: flex;
        justify-content: space-between;
        align-content: center;
        cursor: none;
    }

    .insight-pre-{{ context.rnd }}>span{
        margin: 0 5px;
    }

    .col-cat-des-{{ context.rnd }} {
        flex: 0 1 auto;
        text-overflow: clip;
        overflow: hidden;
        white-space: nowrap;
    }

    .plot-title-{{ context.rnd }} {
        display: inline-block;
        width: 245px;
        vertical-align: middle;
        height: 25px;
    }

    .plot-title-{{ context.rnd }} > div {
        font-weight: 800;
        color: #828282;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 0;
    }

    .plot-title-{{ context.rnd }}:hover > div{
        overflow-wrap: break-word;
        max-width: 240px;
        z-index: 1;
        position: absolute;
        max-height: 300px;
        background-color: white;
    }

    .insight-btn-{{ context.rnd }} {
        filter: invert(73%) sepia(44%) saturate(243%) hue-rotate(181deg) brightness(87%) contrast(87%);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='exclamation-circle w-6 h-6'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
        background-size: 20px;
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        opacity: 0.5;
        display: inline-block;
        cursor: pointer;
        position: relative;
        left: 250px;
        bottom: 15px;
        margin: 0;
        z-index: 1;
    }

    .insight-btn-{{ context.rnd }}:hover {
        opacity: 1;
    }

    .insight-check-{{ context.rnd }}:checked~.insight-btn-{{ context.rnd }} {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='x-circle w-6 h-6'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
    }

    .insight-panel-{{ context.rnd }} {
        color: #141212;
        border: 1px solid #444444;
        opacity: 0;
        background-color: #212121;
        transition: all .2s ease;
        position: relative;
        top: 10px;
        margin-top: -20px;
        border-radius: 5px;
        width: 98%;
        max-height: 295px;
        overflow: auto;
        margin-left: 2px;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14),
            0 1px 5px 0 rgba(0, 0, 0, .12),
            0 3px 1px -2px rgba(0, 0, 0, .2);
    }

    .insight-check-{{ context.rnd }}:checked~.insight-panel-{{ context.rnd }} {
        opacity: 0.9;
        z-index: 1;
    }

    .insight-panel-{{ context.rnd }} ol {
        padding-right: 1em !important;
        margin: 1em 0 !important;
    }

    .insight-panel-{{ context.rnd }} .entry-{{ context.rnd }} {
        color: #fff;
        font-weight: 500;
        font-size: 12px;
        margin: 5px 0;
        hyphens: auto;
    }

    .insight-panel-title-{{ context.rnd }} {
        -webkit-font-smoothing: antialiased;
        text-align: center;
        color: #fff;
        margin-top: 1em !important;
        margin-bottom: 0 !important;
        font-size: 16px;
        font-weight: 600;
    }

    #tb-{{ context.rnd }}:checked+label+div {
        display: flex;
    }

    #tb-{{ context.rnd }}+label::before {
        content: "Show ";
    }

    #tb-{{ context.rnd }}:checked+label::before {
        content: "Hide ";
    }

    #tb-{{ context.rnd }}:checked~.page-switch-box-{{ context.rnd }} {
        display: block;
    }

    .toggle-label-{{ context.rnd }} {
        font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
        -webkit-font-smoothing: antialiased;
        color: #141212;
        display: inline-block;
        cursor: pointer;
        width: {{context.container_width}}px;
        background-color: white;
        border: 1px solid #b5d6ea;
        border-radius: 5px;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        font-size: 15px;
        width: 100%;
    }

    .toggle-label-{{ context.rnd }}:hover {
        background-color: #5DADE2;
    }

    .stats-{{ context.rnd }} {
        display: none;
        justify-content: space-between;
    }

    .stats-{{ context.rnd }} table {
        font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
        -webkit-font-smoothing: antialiased;
        border-collapse: collapse !important;
        font-size: 12px;
        table-layout: auto !important;
        width: 100% !important;
        font-weight: 600;
    }

    .stats-{{ context.rnd }} table th {
        border-bottom: 1px solid #cccccc;
    }

    .stats-{{ context.rnd }} table td {
        border-bottom: 1px solid #cccccc;
    }

    .tabledata-{{ context.rnd }} {
        flex: 1 1 50%;
    }

    .tabledata-title-{{ context.rnd }} {
        text-align: center;
        font-size: 16px;
        font-weight: 600;
    }

    .tabledata-{{ context.rnd }} th, .tabledata-{{ context.rnd }} td {
        text-align: left;
    }
    .insights-{{ context.rnd }} {
        flex: 1 1 50%;
        text-align: center;
    }

    .page-box-{{ context.rnd }} {
        display: none;
    }

    .page-box-{{ context.rnd }} table {
        table-layout: auto;
        width: 100%;
        border-collapse: collapse;
    }

    .page-box-{{ context.rnd }} th {
        text-align: left;
    }

    .page-box-{{ context.rnd }} td {
        text-align: center;
    }

    .page-box-{{ context.rnd }}:first-of-type {
        display: block;
    }

    .insights-{{ context.rnd }} p {
        vertical-align: middle;
    }

    .insights-{{ context.rnd }} table td {
        min-width: 82px;
    }

    .des-{{ context.rnd }} span {
        max-width: 85px;
    }

    .des-{{ context.rnd }} span:hover {
        max-width: 90px;
    }

    .ins-type-{{ context.rnd }} {
        font-weight: 700;
        font-size: 85%;
        letter-spacing: -0.5px;
        color: #fff;
        background-color: #5DADE2;
        border-radius: 4px;
        padding: 2px 4px;
    }

    .col-name-{{ context.rnd }} {
        font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
        font-size: 85%;
        background-color: #f9f2f4;
        border: 1px solid #5DADE2;
        border-radius: 4px;
        padding: 0 4px;
        display: inline-block;
        max-width: 200px;
        text-overflow: ellipsis;
        overflow: hidden;
        vertical-align: middle;
        color: #000000;
        white-space: nowrap;
        transition: all 0.5s ease-out;
    }

    .col-name-{{ context.rnd }}:hover {
        overflow-wrap: break-word;
        white-space: normal;
    }

    .col-cat-{{ context.rnd }} {
        border-radius: 2px;
        flex: 0 1 auto;
        line-height: 18px;
        font-size: 85%;
    }

    .page-switch-box-{{ context.rnd }} {
        max-width: 13em;
        margin-left: auto;
        margin-right: auto;
    }

    .page-switch-{{ context.rnd }}::-webkit-scrollbar {
        width: 5px;
    }

    .page-switch-{{ context.rnd }}::-webkit-scrollbar-thumb {
        background-color: #5DADE2;
        border-radius: 5px;
    }

    .page-switch-{{ context.rnd }}::-webkit-scrollbar-track {
        background: #b5d6ea;
    }

    .page-switch-{{ context.rnd }} {
        list-style: none;
        display: flex;
        justify-content: flex-start;
        overflow: auto;
        padding: 0 !important;
    }

    .page-switch-{{ context.rnd }} li {
        flex: 0 1 auto;
        text-align: center;
        text-decoration: none;
        font-size: 10px;
        font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        color: #141212;
        cursor: pointer;
        background-color: white;
        border: 1px solid #b5d6ea;
        border-radius: 3px;
        padding: 5px 10px;
        list-style: none;
    }

    .page-switch-{{ context.rnd }} li:first-of-type {
        background-color: #5DADE2;
    }

    #vtr-{{ context.rnd }} {
        height: 56px;
    }

    #vtr-{{ context.rnd }} ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #vtr-{{ context.rnd }} td {
        padding-top: 0;
        padding-bottom: 0;
    }

    .patch-cls-{{ context.rnd }} {
        max-width: 100%;
    }

    .plot-legend-{{ context.rnd }} {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: {{ context.container_width }}px;
        background-color: white;
        cursor: default;
    }

    .plot-legend-{{ context.rnd }}:hover .legend-color-{{ context.rnd }} {
        filter: unset;
    }

    .legend-bar-{{ context.rnd }} {
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 1 250px;
    }

    .legend-color-{{ context.rnd }} {
        width: 15px;
        height: 15px;
        filter: opacity(0.6);
        border: 1px solid #444444;
    }

    .legend-label-{{ context.rnd }} {
        text-align: center;
        margin: 0 10px;
        color: #444444
    }

    .info-container-{{ context.rnd }} {
        width: 300px;
        height: 0;
        position: relative;
        top: 10px;
        right: 5px;
    }

    .htg-btn-{{ context.rnd }} {
        filter: invert(73%) sepia(44%) saturate(243%) hue-rotate(181deg) brightness(87%) contrast(87%);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
        background-size: 20px;
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        opacity: 0.5;
        display: inline-block;
        cursor: pointer;
        position: absolute;
        left: 275px;
        bottom: -5px;
        margin: 0;
        z-index: 1;
    }

    .htg-btn-{{ context.rnd }}:hover {
        opacity: 1;
    }

    .htg-entry-{{ context.rnd }} {
        border: 1px solid white;
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.1);
        color: #ffffffe0;
        padding: 10px;
        margin: 10px auto;
        width: 240px;
    }

    .htg-entry-conf-{{ context.rnd }} {
        font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
        font-size: 12px;
        background: rgb(187, 71, 103);
        width: fit-content;
        border: 1px solid white;
        border-radius: 2px;
        padding: 2px 5px;
    }

    .htg-entry-desc-{{ context.rnd }} {
        font-family: sans-serif;
        font-size: 12px;
        color: #909599;
        cursor: default;
        padding: 2px 5px;
    }

    .htg-copy-btn-{{ context.rnd }} {
        border: 1px solid white;
        border-radius: 3px;
        margin: 10px 25%;
        width: 50%;
        margin-top: 10px;
        font-size: 12px;
    }

    .htg-copy-btn-{{ context.rnd }}:hover {
        background: #5DADE2;
    }

    .top-info-{{ context.rnd }} {
        max-width: 972px;
    }

    .comparison-stats-{{ context.rnd }} {
        flex: 0 1 100%;
    }

    .comparison-stats-{{ context.rnd }} h3 {
        text-align: center;
    }

    .comparison-stats-{{ context.rnd }} table, .comparison-stats-{{ context.rnd }} tr {
        text-align: left;
    }

    .comparison-stats-{{ context.rnd }} th {
        text-align: right;
        max-width: 90px;
    }

    #comp-label-{{ context.rnd }} td {
        font-weight: 800;
        font-size: 15px;
    }

    ul.simple-pagination {
        list-style: none;
    }

    .simple-pagination {
        display: block;
        overflow: hidden;
        padding: 0 5px 5px 0;
        margin: 0;
    }

    .simple-pagination ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .simple-pagination li {
        list-style: none;
        padding: 0;
        margin: 0;
        float: left;
    }
    span.ellipse.clickable {
        cursor: pointer;
    }

    .ellipse input {
        width: 3em;
    }

    /*------------------------------------*\
        Compact Theme Styles
    \*------------------------------------*/
    .compact-theme span {
        cursor:pointer;
    }

    .compact-theme a, .compact-theme span {
        float: left;
        color: #333;
        font-size:14px;
        line-height:24px;
        font-weight: normal;
        text-align: center;
        border: 1px solid #AAA;
        border-left: none;
        min-width: 14px;
        padding: 0 7px;
        box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
        background: #efefef; /* Old browsers */
        background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */
        background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */
    }

    .compact-theme a:hover, .compact-theme li:not(.disabled):not(.active) span:hover {
        text-decoration: none;
        background: #efefef; /* Old browsers */
        background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#bbbbbb)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* IE10+ */
        background: linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* W3C */
    }

    .compact-theme li:first-child a, .compact-theme li:first-child span {
        border-left: 1px solid #AAA;
        border-radius: 3px 0 0 3px;
    }

    .compact-theme li:last-child a, .compact-theme li:last-child span {
        border-radius: 0 3px 3px 0;
    }

    .compact-theme .current {
        background: #bbbbbb; /* Old browsers */
        background: -moz-linear-gradient(top, #bbbbbb 0%, #efefef 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbbbbb), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* IE10+ */
        background: linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* W3C */
        cursor: default;
    }

    .compact-theme .ellipse {
        background: #EAEAEA;
        padding: 0 10px;
        cursor: default;
    }

    /*------------------------------------*\
        Light Theme Styles
    \*------------------------------------*/
    .light-theme span {
        cursor:pointer;
    }

    .light-theme a, .light-theme span {
        float: left;
        color: #666;
        font-size:14px;
        line-height:24px;
        font-weight: normal;
        text-align: center;
        border: 1px solid #BBB;
        min-width: 14px;
        padding: 0 7px;
        margin: 0 5px 0 0;
        border-radius: 3px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
        background: #efefef; /* Old browsers */
        background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */
        background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */
    }

    .light-theme a:hover, .light-theme li:not(.disabled):not(.active) span:hover {
        text-decoration: none;
        background: #FCFCFC;
    }

    .light-theme .current {
        background: #666;
        color: #FFF;
        border-color: #444;
        box-shadow: 0 1px 0 rgba(255,255,255,1), 0 0 2px rgba(0, 0, 0, 0.3) inset;
        cursor: default;
    }

    .light-theme .ellipse {
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        font-weight: bold;
        cursor: default;
    }

    /*------------------------------------*\
        Dark Theme Styles
    \*------------------------------------*/
    .dark-theme span {
        cursor:pointer;
    }

    .dark-theme a, .dark-theme span {
        float: left;
        color: #CCC;
        font-size:14px;
        line-height:24px;
        font-weight: normal;
        text-align: center;
        border: 1px solid #222;
        min-width: 14px;
        padding: 0 7px;
        margin: 0 5px 0 0;
        border-radius: 3px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
        background: #555; /* Old browsers */
        background: -moz-linear-gradient(top, #555 0%, #333 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(100%,#333)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #555 0%,#333 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #555 0%,#333 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #555 0%,#333 100%); /* IE10+ */
        background: linear-gradient(top, #555 0%,#333 100%); /* W3C */
    }

    .dark-theme a:hover, .dark-theme li:not(.disabled):not(.active) span:hover {
        text-decoration: none;
        background: #444;
    }

    .dark-theme .current {
        background: #222;
        color: #FFF;
        border-color: #000;
        box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px 1px rgba(0, 0, 0, 0.1) inset;
        cursor: default;
    }

    .dark-theme .ellipse {
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        font-weight: bold;
        cursor: default;
    }

    .pagination-{{ context.rnd }} {
        text-align: center;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .pagination-button-{{ context.rnd }} {
        display: inline-block;
        border: 1px solid #ddd;
        margin: 0px;
        width: 40px;
        height: 20px;
        text-align: center;
        vertical-align: middle;
        padding: 11px 0;
        background: #eee;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .pagination-button-{{ context.rnd }}:hover {
        cursor: pointer;
    }

    html {
        display: table;
        margin: left; {# Related to vscode display. See issue 896 #}
    }

    body {
        display: table-cell;
        vertical-align: middle;
    }

    input#num-per-page-{{ context.rnd }} {
        text-align: center;
        border: 1px solid #ddd;
        margin: 0px;
        width: 40px;
        height: 40px;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .num-of-plots-{{ context.rnd }} {
         text-align: center;
         padding-top: 30px;
    }

    .num-of-plots-{{ context.rnd }} input,
    .num-of-plots-{{ context.rnd }} p {
         display: inline-block;
         margin: 0;
         vertical-align: middle;
         box-shadow: none;
         font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
         font-size: 15px;
    }

    .num-of-plots-minus-{{ context.rnd }},
    .num-of-plots-plus-{{ context.rnd }} {
         padding: 7px 10px 8px;
         height: 41px;
         background-color: #ffffff;
         border: 1px solid #ddd;
         cursor:pointer;
    }

    .num-of-plots-minus-{{ context.rnd }} {
        margin-right: -4px;
        border-radius: 8px 0 0 8px;
    }

    .num-of-plots-plus-{{ context.rnd }} {
        margin-left: -4px;
        border-radius: 0 8px 8px 0;
    }

    .num-of-plots-minus-{{ context.rnd }}:hover,
    .num-of-plots-plus-{{ context.rnd }}:hover {
        background: #eeeeee;
    }

    .num-of-plots-minus-{{ context.rnd }}:focus,
    .num-of-plots-plus-{{ context.rnd }}:focus {
        outline: none;
    }

</style>
